<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=500" />
	<meta name="keywords" content="ScrollMagic, example, scrolling, attaching, scrollbar, advanced, tweening, tween, tweenmax" />
	<meta name="author"	content="Jan Paepke (www.janpaepke.de)" />
	<title>Advanced Tweening - Examples - ScrollMagic</title>

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="../../assets/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/style.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/examples.css" type="text/css">
	<link rel="shortcut icon" href="../../assets/img/favicon.ico" type="image/x-icon">

	<script type="text/javascript" src="../../assets/js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/highlight.pack.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/modernizr.custom.min.js"></script>
	<script type="text/javascript" src="../../assets/js/examples.js"></script>
	
	<script type="text/javascript" src="../assets/js/lib/gsap3/gsap.min.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/ScrollMagic.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
</head>
<body>
	<ul id="menu"></ul>
	<div id="content-wrapper">
		<div id="example-wrapper">
			<div class="scrollContent">
				<section id="titlechart">
					<div id="description">
						<h1 class="badge gsap">Advanced Tweening</h1>
						<h2>ScrollMagic can handle everything TweenMax throws at it.</h2>
						<ol>
							<li>A tween can be repeated indefinitely within the scene's duration.</li>
							<li>A tween can be a timeline consisting of multiple tweens and even contain events attached to them.</li>
							<li>Classnames can be tweened just as well.</li>
							<li>Staggering and Easing are no problem either.</li>
						</ol>
						<p>
							To find out more about the Greensock Animation Platform, refer to its <a href="http://greensock.com/docs/#/HTML5/" target="_blank">documentation</a>.
						</p>
						<a href="#" class="viewsource">view source</a>
					</div>
					<script>
						// init controller
						var controller = new ScrollMagic.Controller();
					</script>
				</section>
				<section class="demo">
					<div class="spacer s2"></div>
					<div id="trigger1" class="spacer s0"></div>
					<div id="animate1" class="box1 skin">
						<p>tick. tack.</p>
						<a href="#" class="viewsource">view source</a>
					</div>
					<div class="spacer s2"></div>
					<script>
						// build tween
						var tween = TweenMax.fromTo("#animate1", 1,
													{left: -100},
													{left: 100, repeat: -1, yoyo: true, ease: Circ.easeInOut}
												);

						// build scene
						var scene = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 200, offset: -50})
										.setTween(tween)
										.addIndicators({name: "loop"}) // add indicators (requires plugin)
										.addTo(controller);
					</script>
				</section>
				<section class="demo">
					<div class="spacer s1"></div>
					<div id="trigger2" class="spacer s1"></div>
					<div class="spacer s0"></div>
					<div id="animate2" class="box1 red">
						<p>Let's draw!</p>
						<a href="#" class="viewsource">view source</a>
					</div>
					<div class="spacer s2"></div>
					<script>
						// set start offset
						TweenMax.set("#animate2", {left: "-=100"});

						var $box = $("#animate2 p");

						// build tween
						var tween = new TimelineMax()
							.to("#animate2", 1, {top: "-=200",
									onStart: function () {$box.html("This");},
									onReverseComplete: function () {$box.html("Let's draw!");}
								}
							)
							.to("#animate2", 1, {top: "+=200", left: "+=200",
									onStart: function () {$box.html("is");},
									onReverseComplete: function () {$box.html("This");}
								}
							)
							.to("#animate2", 1, {top: "-=200",
									onStart: function () {$box.html("the");},
									onReverseComplete: function () {$box.html("is");}
								}
							)
							.to("#animate2", 1, {left: "-=200",
									onStart: function () {$box.html("house");},
									onReverseComplete: function () {$box.html("the");}
								}
							)
							.to("#animate2", 1, {top: "-=100", left: "+=100",
									onStart: function () {$box.html("of");},
									onReverseComplete: function () {$box.html("house");}
								}
							)
							.to("#animate2", 1, {top: "+=100", left: "+=100",
									onStart: function () {$box.html("San...");},
									onReverseComplete: function () {$box.html("of");}
								}
							)
							.to("#animate2", 1, {top: "+=200", left: "-=200",
									onStart: function () {$box.html("...ta");},
									onReverseComplete: function () {$box.html("San...");}
								}
							)
							.to("#animate2", 1, {left: "+=200",
									onStart: function () {$box.html("Clause.");},
									onReverseComplete: function () {$box.html("...ta");}
								}
							);

						// build scene
						var scene = new ScrollMagic.Scene({triggerElement: "#trigger2"})
										.setTween(tween)
										.addIndicators({name: "timeline"}) // add indicators (requires plugin)
										.addTo(controller);

					</script>
				</section>
				<section class="demo">
					<style type="text/css">
						.fish {
							min-width: 500px;
						}
					</style>
					<div class="spacer s2"></div>
					<div id="trigger3" class="spacer s0"></div>
					<div id="animate3" class="box2 blue">
						<p>I caught a fish THIS big.</p>
						<a href="#" class="viewsource">view source</a>
					</div>
					<div class="spacer s2"></div>
					<script>
						// build tween
						var tween = TweenMax.to("#animate3", 1, {className: "+=fish"});

						// build scene
						var scene = new ScrollMagic.Scene({triggerElement: "#trigger3", duration: 200, offset: -50})
										.setTween(tween)
										.addIndicators({name: "tween css class"}) // add indicators (requires plugin)
										.addTo(controller);

					</script>
				</section>
				<section class="demo" style="overflow-x: hidden">
					<div class="spacer s1"></div>
					<div id="trigger4" class="spacer s1"></div>
					<div class="spacer s0"></div>
					<div class="animate4 box2 black outline">
						<p>Tchoo Tchoo!</p>
						<a href="#" class="viewsource">view source</a>
					</div>
					<div class="animate4 box2 black outline"></div>
					<div class="animate4 box2 black outline"></div>
					<div class="animate4 box2 black outline"></div>
					<div class="animate4 box2 black outline"></div>
					<div class="animate4 box2 black outline"></div>
					<div class="animate4 box2 black outline"></div>
					<div class="animate4 box2 black outline"></div>
					<div class="animate4 box2 black outline"></div>
					<div class="animate4 box2 black outline"></div>
					<div class="spacer s2"></div>
					<script>
						// build tween
						var tween = TweenMax.staggerFromTo(".animate4", 2, {left: 700}, {left: 0, ease: Back.easeOut}, 0.15);

						// build scene
						var scene = new ScrollMagic.Scene({triggerElement: "#trigger4", duration: 300})
										.setTween(tween)
										.addIndicators({name: "staggering"}) // add indicators (requires plugin)
										.addTo(controller);

					</script>
				</section>		
				<div class="spacer s_viewport"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../assets/js/tracking.js"></script>
</body>
</html>
